<template>
  <div>
    <el-row :gutter="15">
      <el-col :span="3">
        <el-input
          placeholder="搜索资源名称"
          suffix-icon="el-search"
          @blur="inputSearch"
          @keyup.native.enter="inputSearch"
          v-model="searchObj.mediaName">
        </el-input>
      </el-col>
      <el-col :span="3">
        <el-button style="position: relative;top: 2px;" type="danger" @click="mutiDel">批量删除</el-button>
      </el-col>
    </el-row>
    <el-tabs @tab-click="tabClickMethods" v-model="activedCard" style="margin-top: 15px;" type="border-card">
      <el-tab-pane name="video" label="视频">
        <CommonTable
          class="commonTable"
          ref="terminalVideoFileTableRef"
          :is-selection="true"
          :query-params="searchObj"
          :is-show-index="true"
          :is-has-opera="true"
          @changeRow="changeRowMethods"
          :t-column-data="FileCol"
          :remote-api="getFileList"
          :is-reserve-select="true"
          operating-width="180px"
        >
          <template slot="operate" slot-scope="scope">
            <el-button type="text" @click="delTerFile(scope.row)">删除</el-button>
          </template>
        </CommonTable>
      </el-tab-pane>
      <el-tab-pane name="picture" label="图片">
        <CommonTable
          class="commonTable"
          ref="terminalPictureFileTableRef"
          :is-selection="true"
          :query-params="searchObj"
          :is-show-index="true"
          :is-has-opera="true"
          @changeRow="changeRowMethods"
          :t-column-data="FileCol"
          :remote-api="getFileList"
          :is-reserve-select="true"
          operating-width="180px"
        >
          <template slot="operate" slot-scope="scope">
            <el-button type="text" @click="delTerFile(scope.row)">删除</el-button>
          </template>
        </CommonTable>
      </el-tab-pane>
      <el-tab-pane name="web" label="网页">
        <CommonTable
          class="commonTable"
          ref="terminalWebFileTableRef"
          :is-selection="true"
          :query-params="searchObj"
          :is-show-index="true"
          :is-has-opera="true"
          @changeRow="changeRowMethods"
          :t-column-data="FileCol"
          :remote-api="getFileList"
          :is-reserve-select="true"
          operating-width="180px"
        >
          <template slot="operate" slot-scope="scope">
            <el-button type="text" @click="delTerFile(scope.row)">删除</el-button>
          </template>
        </CommonTable>
      </el-tab-pane>
      <el-tab-pane name="application" label="应用程序">
        <CommonTable
          class="commonTable"
          ref="terminalApplicationFileTableRef"
          :is-selection="true"
          :query-params="searchObj"
          :is-show-index="true"
          :is-has-opera="true"
          @changeRow="changeRowMethods"
          :t-column-data="FileCol"
          :remote-api="getFileList"
          :is-reserve-select="true"
          operating-width="180px"
        >
          <template slot="operate" slot-scope="scope">
            <el-button type="text" @click="delTerFile(scope.row)">删除</el-button>
          </template>
        </CommonTable>
      </el-tab-pane>

      <el-tab-pane name="desktop" label="桌面应用">
        <CommonTable
          class="commonTable"
          ref="terminalDesktopFileTableRef"
          :is-selection="true"
          :query-params="searchObj"
          :is-show-index="true"
          :is-has-opera="true"
          @changeRow="changeRowMethods"
          :t-column-data="FileCol"
          :remote-api="getFileList"
          :is-reserve-select="true"
          operating-width="180px"
        >
          <template slot="operate" slot-scope="scope">
            <el-button type="text" @click="delTerFile(scope.row)">删除</el-button>
          </template>
        </CommonTable>
      </el-tab-pane>

      <el-tab-pane name="office" label="文档">
        <CommonTable
          class="commonTable"
          ref="terminalOfficeFileTableRef"
          :is-selection="true"
          :query-params="searchObj"
          :is-show-index="true"
          :is-has-opera="true"
          @changeRow="changeRowMethods"
          :t-column-data="FileCol"
          :remote-api="getFileList"
          :is-reserve-select="true"
          operating-width="180px"
        >
          <template slot="operate" slot-scope="scope">
            <el-button type="text" @click="delTerFile(scope.row)">删除</el-button>
          </template>
        </CommonTable>
      </el-tab-pane>

      <el-tab-pane name="other" label="其他">
        <CommonTable
          class="commonTable"
          ref="terminalOtherFileTableRef"
          :is-selection="true"
          :query-params="searchObj"
          :is-show-index="true"
          :is-has-opera="true"
          @changeRow="changeRowMethods"
          :t-column-data="FileCol"
          :remote-api="getFileList"
          :is-reserve-select="true"
          operating-width="180px"
        >
          <template slot="operate" slot-scope="scope">
            <el-button type="text" @click="delTerFile(scope.row)">删除</el-button>
          </template>
        </CommonTable>
      </el-tab-pane>
    </el-tabs>

    <WarnPanelDialog
      :statusProp="statusIsDelFileProp"
      warn-content="是否删除文件"
      @confirmHandler="confirmDelMethods"
      @cancelHandler="cancelHandler"
    >
    </WarnPanelDialog>
  </div>
</template>

<script>
import {FileCol} from '../tableCol/fileCol'
import {mediaTypeMap} from '@/utils/config'
import * as service from '../service'

export default {
  name: 'fileList',
  data() {
    return {
      statusIsDelFileProp: false,
      getFileList: service.getClientFileList,
      FileCol,
      terminalId: '',
      searchObj: {
        page: 1,
        pageSize: 20,
        clientId: '',
        mediaType: 1,  // 内容类型: 1视频 2图片 3文档 4应用程序 5网页应用 6电脑桌面 7其他
      },
      activedCard: 'video',
      clickCache: {},
      mutiDelList: []
    }
  },
  mounted() {
    const query = this.$route.query
    if(query.terminalId) {
      this.searchObj.clientId = query.terminalId
      this.getFileListByTerminalId()
    }
  },
  methods: {
    tabClickMethods(row) {
      this.activedCard = row.name
      this.searchObj.mediaType = mediaTypeMap[row.name]
      this.getFileListByTerminalId()
      console.log('activedCard ---', this.activedCard)
    },
    mutiDel() {
      if(this.mutiDelList.length === 0) {
        this.$message.error('请选择要删除的文件')
        return
      }

      this.statusIsDelFileProp = true
    },
    delTerFile(row) {
      console.log('row ---', row)
      this.clickCache = {...row}
      this.statusIsDelFileProp = true
    },
    cancelHandler() {
      this.clickCache = {}
      this.statusIsDelFileProp = false
    },
    confirmDelMethods() {
      const params = {
        clientId: this.searchObj.clientId,
        mediaIds: [this.clickCache.media_id]
      }

      if(this.clickCache && this.clickCache.media_id) {
        service.delTerFile(params).then((res) => {
          this.$message.success('删除成功')
          this.getFileListByTerminalId()
          this.cancelHandler()
        })
      } else {
        let tmpList = []
        this.mutiDelList.forEach((item) => {
          tmpList.push(item.media_id)
        })
        params.mediaIds = [...tmpList]
        service.delTerFile(params).then((res) => {
          this.$message.success('删除成功')
          this.mutiDelList = []
          this.getFileListByTerminalId()
          this.cancelHandler()
          this.$refs.terminalFileTableRef.clearSelectionMethods()
        })
      }
    },
    inputSearch() {

    },
    getFileListByTerminalId() {
      const params = Object.assign({}, this.searchObj)
      console.log('this.$refs.terminalFileTableRef ---', this.$refs.terminalFileTableRef)
      if(this.activedCard === 'video') {
        this.$refs.terminalVideoFileTableRef.queryData(params)
      } else if(this.activedCard === 'picture') {
        this.$refs.terminalPictureFileTableRef.queryData(params)
      } else if(this.activedCard === 'web') {
        this.$refs.terminalWebFileTableRef.queryData(params)
      } else if(this.activedCard === 'application') {
        this.$refs.terminalApplicationFileTableRef.queryData(params)
      } else if(this.activedCard === 'office') {
        this.$refs.terminalOfficeFileTableRef.queryData(params)
      } else if(this.activedCard === 'desktop') {
        this.$refs.terminalDesktopFileTableRef.queryData(params)
      } else if(this.activedCard === 'other') {
        this.$refs.terminalOtherFileTableRef.queryData(params)
      }
    },
    changeRowMethods(row) {
      this.mutiDelList = [...row]
    },
  }
}
</script>

<style scoped lang="scss">
.commonTable{
  margin-top: 15px;
}
</style>
